<template>
	<view :class="pageClass" :style="pageStyleAuto" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(list,key) in modData" :class="list.mod_class" :key="key" :style="list.css">
			<moxi-index v-if="list.name=='plugin_tousu_form'" :list="list" >
		 <view class="box" :style="{background:getStyle(list.set.bcolor)}">
			 <img src="https://img.moxikeji.net/site/19/240707/668ab0d4b04b9.jpg" alt=""
			  style="position:absolute;left: 0;width: 100%;top: 0;z-index: 1;">
			  <view style="position: absolute;;left: 0;top: 0;z-index: 2;width: 100%;">
				  <view class="tb" style="z-index: 2;">
						<view style="display: flex;flex-direction: row;">
							<view style="width: 40px;" v-if="shop.logo.length&&list.set.show_logo==1">
								<image class="logo" :src="shop.logo" alt="" >
							</view>
							<view class="title">{{shop.name}}
							</view>
						</view>
						<view style="margin-top: 20px;margin-right: 10px;;">
							 <view class="my" @click="my" v-if="left" :style="{background:list.set.my_btn}">我的投诉</view>
							 <view class="my" @click="ts" v-else :style="{background:list.set.btn}">我要投诉</view>
						</view>
				  </view>
				  <view class="desc">
				  	{{shop.desc}}
				  </view>
			  </view>
		 </view>
		  <u-transition :show="left" mode="fade-left">
		 <view class="form">
			
			<view class="input">
				<view class="c_t"><text style="color: red;">*</text>姓名</view>
				<u--input placeholder="请输入您的姓名" v-model="info.name"></u--input>
			</view>
			 <view class="input">
			 	<view class="c_t">电话</view>
			 	<u--input type="number" placeholder="请输入您的手机号码" v-model="info.tel"></u--input>
			 </view>
			<view class="input">
				<view class="c_t"><text style="color: red;">*</text>投诉内容</view>
				<u--textarea  placeholder="请输入投诉内容" v-model="info.con"></u--textarea>
			</view>
			<view class="input" v-if="shop.img==1">
				<view class="c_t">上传图片</view>
				<u-upload
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:maxCount="4"
					:previewFullImage="true"
				></u-upload>
			</view>
			<view class="input" v-if="shop.video==1">
				<view class="c_t">上传视频</view>
				<u-upload
					:fileList="videoList"
					@afterRead="upvideo"
					@delete="deleteV"
					multiple
					:maxCount="1"
					:previewFullImage="true"
					accept='video'
				></u-upload>
			</view>
		<u-line></u-line>
		<view style="margin-top: 10px;">
			<u-button :color="app_color" @click="submit" :text="eidt?'修改投诉':'提交投诉'"></u-button>
			<u-button  @click="del()" text="取消投诉" style="margin-top: 10px;" v-if="eidt&&status==1"></u-button>
			
		</view>
	
		 </view>
		</u-transition>
		  <u-transition :show="right">
			  <view class="form">
					   <u-empty mode="history" v-if="!listData.length">
					   </u-empty>
					   <view v-else>
						   <u-divider text="投诉记录"></u-divider>
						   <view>
							 <u-cell-group :border="false">
							 	<u-cell v-for="list in listData" @click="ts(list)"
							 	    :title="'投诉时间：'+$u.timeFormat(list.c_time, 'yyyy年mm月dd日')"
							 	    :value="list.status==1?'待处理':(list.status==0?'已取消':'已处理')"
									 :label="list.shop_name"
							 	    isLink
							 	></u-cell>
							 </u-cell-group>
						   </view>
					   </view>
			</view>
		</u-transition>
		</moxi-index>
		<moxi-index v-else :list="list"></moxi-index>
		</view>
		
		<u-picker v-if="!param.id" :show="pick" :columns="columns" keyName="label" :closeOnClickOverlay="true"
	
			@cancel="cancel"
		  @confirm="confirm"
		  :defaultIndex="defaultIndex"
		 ></u-picker>
		 <u-popup :show="box" @close="box=false" :round="10" mode="bottom">
		 <view style="padding: 10px;" v-if="info.id">
			 <u-divider text="投诉详情"></u-divider>
			 <view class="info-list">
			 	 <text class="list-t">时间：</text>
			 	 <text class="list-v">{{$u.timeFormat(info.c_time, 'yyyy年mm月dd日')}}</text>
			 </view>
			<view class="info-list">
				 <text class="list-t">姓名：</text>
				 <text class="list-v">{{info.name}}</text>
			</view>
			<view class="info-list">
				 <text class="list-t">电话：</text>
				 <text class="list-v">{{info.tel}}</text>
			</view>
			<view class="info-list">
				 <text class="list-t">投诉内容：</text>
				 <text class="list-v">
					 {{info.con}}
				 </text>
			</view>
			<view class="info-list">
				 <text class="list-t">状态：</text>
				 <text class="list-v">
					   <text style="color: orangered" v-if="info.status==0">已取消</text>
					 <text style="color: #666;" v-if="info.status==1">待处理</text>
					  <text style="color:green" v-if="info.status==2">已处理</text>
					
				 </text>
			</view>
			<view class="info-list" v-if="info.status==2">
				 <text class="list-t">反馈结果：</text>
				 <view class="list-v" style="min-height: 100px;background: #f8f8f8;border-radius: 4px;
				 color: red;">
					{{info.msg}}
				 </view>
			</view>
		 </view>
		 </u-popup>
		 <moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
		 
	</view>
</template>
<script>
	export default {
		data() {
			return {
				defaultIndex:[0],
				eidt:false,
				listData:[],
				left:true,
				right:false,
				fileList:[],
				videoList:[],
				info:{
					name:"",
					tel:"",
					con:"",
					img:[],
					video:'',
					status:1,
					c_time:"",
					msg:""
				},
				shop:{
					name:"",
					desc:"",
					logo:"",
					video:0,
					id:""
				},
				status:0,
				shopId:"",
				shopList:[],
				columns:[[]],
				pick:false,
				box:false
				
			}
		},
		onLoad() {
			if(this.param.id){
				this.shopId = this.param.id;
			}else{
				this.pick = true;
			}
			if(!this.shopId){
				this.shopId = 0;
			}
			this.get(this.shopId)
			
		},
		onReady() {
			
		},
		methods: {
			del(){
				this.isBox('操作提示',()=>{
					this.moxiPost('/plugin/tousu/index/info/del',{id:this.info.id},(data)=>{
						this.msg(data.hint)
						this.get()
					})
				},'确定要取消该投诉记录吗？')
			},
			getStyle(color){
				let str = '';
				if(!color[0]){
					return ''
				}else if(!color[1]){
					color[1] = color[0]
				}
				for(let k in color){
					str += ','+color[k];
				}
				return 'linear-gradient(to right'+str+')'
			},
			cancel(){
				this.msg("请选择门店")
			},
			my(){
				this.left = false;
				this.right = true;
			},
			confirm(e){
				this.get(e.value[0].id)
				this.pick = false;
			},
			ts(ob){
			
				
				this.fileList = [];
				this.videoList = [];
				if(ob&&ob.id){
					console.log(ob);
					this.eidt = true;
					this.info.name = ob.name;
					this.info.tel = ob.tel;
					this.info.con = ob.con;
					this.info.img = ob.img;
					this.info.video = ob.video
					this.info.msg = ob.msg
					this.info.id = ob.id;
					this.info.status = ob.status;
					this.shopId = ob.shop_id;
					this.c_time = ob.c_time;
					for(let k in ob.img){
						this.fileList.push({
							url:ob.img[k],
						})
					}
					if(this.info.video&&this.info.video.length){
						this.videoList.push({
							url:this.info.video
						})
					}
					// this.fileList = ob.img
				}else{
					this.eidt = false;
					this.false = true;
					this.info.name = '';
					this.info.tel = '';
					this.info.con = '';
					this.info.img = [];
					this.info.video = ''
					this.info.id = '';
				}
				if(ob&&(ob.status==0||ob.status==2)){
					this.box = true;
					return;
				}
				this.left = true;
				this.right = false;
	
			},
			submit(){
				if(!this.shopId){
					this.msg('缺少门店ID')
					return;
				}
				let imgList = [];
				for(let k in this.fileList){
					imgList.push(this.fileList[k].url)
				}
				this.info.shop_id = this.shopId;
				this.info.img = imgList;
				this.info.video = '';
				if(this.videoList.length&&this.videoList[0]){
					if(this.videoList[0].url){
						this.info.video = this.videoList[0].url;
					}
				}
				this.moxiPost('/plugin/tousu/index/info/submit',this.info,(data)=>{
					this.msg(data.hint)
					this.get()
				})
			}, 
			get(shopId=false){
				if(shopId){
					this.shopId = shopId;
				}
				this.moxiPost('/plugin/tousu/index/info/get_shop',{id:this.shopId},(data)=>{
					this.shop.name = data.data.name;
					this.shop.desc = data.data.desc;
					this.shop.logo = data.data.logo;
					this.shop.video = data.data.video;
					this.shop.img = data.data.img;
					this.listData = data.list;
					this.shopList = data.shopList;
					if(shopId!==false){
						this.left = true;
						this.right = false;
					}else{
						this.left = false;
						this.right = true;
					}
				
					let c = []
					for(let k in this.shopList){
						c.push({
							label:this.shopList[k].name,
							id:this.shopList[k].id
						})
						if(this.shopList[k].id==this.shopId){
							this.defaultIndex = [1];
						}
					}
					
					this.columns = [c];
					
					this.$forceUpdate()
				
				})
			},
			deleteV(event){
					this[`videoList${event.name}`].splice(event.index, 1)
			},
			deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
				 afterRead(event) {
								// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
								let lists = [].concat(event.file)
								let fileListLen = this[`fileList${event.name}`].length
								lists.map((item) => {
									this[`fileList${event.name}`].push({
										...item,
										status: 'uploading',
										message: '上传中'
									})
								})
								for (let i = 0; i < lists.length; i++) {
									this.moxiUpload(lists[i].url,(data)=>{
										let item = this[`fileList${event.name}`][fileListLen]
										this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
											status: 'success',
											message: '',
											url: data
										}))
										fileListLen++
									})	
								}
							},
							upvideo(event) {
								
								// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
								let lists = [].concat(event.file)
								let fileListLen = this[`videoList${event.name}`].length
								lists.map((item) => {
									this[`videoList${event.name}`].push({
										...item,
										status: 'uploading',
										message: '上传中'
									})
								})
							
								for (let i = 0; i < lists.length; i++) {
									this.moxiUpload(lists[i].url,(data)=>{
										let item = this[`videoList${event.name}`][fileListLen]
										this[`videoList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
											status: 'success',
											message: '',
											url: data
										}))
										fileListLen++
									},'video')	
								}
							}
		}
	}
</script>

<style>
	.info-list{padding: 5px 0;border-bottom: 1px #eee dashed;display: flex;flex-direction: row;justify-content: space-between;}
	.list-t{color: #666;font-size: 14px;width: 100px;flex-shrink: 0;margin-top: 5px;}
	.list-v{color: #666;font-size: 15px;flex: 1;padding: 5px;}
	.list{
		display: flex;flex-direction: row;justify-content: space-between;
		color: #666;border-bottom: 1px #eee dashed;padding-bottom: 10px;margin-bottom: 10px;
		
	}
	.input{
		margin-bottom: 12px;
	}
	.c_t{
		font-size: 14px;margin-bottom: 10px;color: #333;
	}
	.desc{
		margin:0 10px;font-size: 14px;color: #fff;margin-bottom: 10px;
	}
	.form{
		margin: 10px;background: #fff;margin-top: -90px;
		border-radius: 6px;padding: 10px;z-index: 2;
		box-shadow: 0 0 5px #cacaca;
	}
	.tb{
		display: flex;flex-direction: row;justify-content: space-between;width: 100%;
	
	}
	.logo{
		width:30px;height: 30px;margin-top: 20px;margin-left: 10px;border-radius: 100px;flex-shrink: 0
	}
	.my{
		padding: 4px 12px;border-radius: 25px;background: #55aaff;color: #fff;
		font-weight: 500;font-size: 14px;border: 1px #fff solid;
	}
	.title{
		font-size: 18px;font-weight: 600;color: #fff;letter-spacing:2px;margin-top: 22px;margin-bottom: 15px;;
		width: 230px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-left: 10px;
		display: flex;flex-direction: row;
		
	}
	.box{
		z-index: 0;
	position: relative;
	height: 200px;
	width: 100%;
	}

</style>
